<template>
    <el-container>
        <el-header>
            <el-container>
                <el-input v-model="phone" disabled />
                <el-button type="primary" @click="showAddForm=true">关联用户
                </el-button>
            </el-container>
        </el-header>
        <el-main>
            <el-table :data="tableData" stripe element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" v-loading.fullscreen.lock="loading">
                <el-table-column type="index" width="50" />
                <el-table-column prop="userMu" label="用户MU" width="120" />
                <el-table-column prop="nick" label="用户昵称" width="120" />
                <el-table-column prop="head" label="头像" width="120">
                    <template #={head}>
                        <el-avatar shape="square" :size="100" :src="head" />
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="手机号码" min-width="108" />
                <el-table-column prop="createTime" label="绑定时间" min-width="108" />
                <el-table-column label="操作" width="168">
                    <template #={mu}>
                        <el-button plain @click="doDelete(mu)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <SearchPagination :currentPage="currentPage" :total="total" :limit="limit" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange" />
        </el-main>
        <el-footer>
            <el-dialog width="35%" title="添加" :visible="showAddForm">
                <el-form ref="form" :rules="rules" :model="form" label-width="100px">
                    <el-form-item label="用户MU" prop="userMu">
                        <el-input v-model="form.userMu" placeholder="请输入用户MU" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="doAdd">确定</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </el-footer>
    </el-container>
</template>

<script>
import { page, remove, create, update } from '@/chaos/functions/mixin/crud';

export default {
    name: 'relate',
    mixins: [page, remove, create, update],
    data() {
        const rules = {
            userMu: [
                { required: true, message: '请输入userMu', trigger: 'blur' }
            ]
        };
        return {
            domain: 'iya_admin_user',
            rules
        };
    },
    created() {
        if (!this.$route.params.mu) {
            this.$router.push('/open');
        }
        this.data.adminMu = this.$route.params.mu;
        this.form.adminMu = this.$route.params.mu;
        this.phone = this.$route.params.phone;
        this.search();
    }
};
</script>
<style lang="less" scoped>
.el-input {
    width: 280px;
}
</style>

